<template>
  <Card>
    <p slot="title">柜机商户管理</p>
    <div class="search-con search-con-top">
      <div>
        运营商：
        <Select v-model="searchData.operator_id" style="width:180px" filterable>
          <Option v-for="item in operatorList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        所属BDM：
        <Select v-model="searchData.bdm_id" style="width:180px" filterable @on-change="bdmSelectChange">
          <Option v-for="item in BDMList" :value="item.id" :key="item.id">{{ item.nick }}</Option>
        </Select>
        所属BD：
        <Select v-model="searchData.bd_id" style="width:180px" filterable>
          <Option v-for="item in BDList" :value="item.id" :key="item.id">{{ item.nick }}</Option>
        </Select>
        柜机商户：
        <Input v-model="searchData.name" style="width: 200px"></Input>
        手机号：
        <Input v-model="searchData.phone" style="width: 200px"></Input>
        <Button @click="search" type="primary" shape="circle" icon="ios-search" style="margin-left: 10px;">搜索</Button>
        <Button @click="reset" type="success" shape="circle" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
      </div>
    </div>
    <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;">
      <template slot="addressSlot" slot-scope="{ row, index }">
        <p>{{ row.address }}</p>
      </template>
      <template slot-scope="{ row , index}" slot="makeSlot">
        <!--                <i-button type="primary" size="small" @click="edit(row)">编辑</i-button>-->
        <i-button type="success" size="small" @click="bindBD(row.id, row.operator_id, row.operator_name)"
          style="margin-left: 10px;">绑定BD</i-button>
      </template>
    </Table>
    <br>

    <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
    </Page>

    <!-- BD转移对话框 -->
    <Modal v-model="BdModal" title="绑定BD" @on-ok="BdModalOk" @on-cancel="modalCancel">
      <Form ref="formValidate" :model="bdFormItem" :label-width="100">
        <FormItem label="所属运营商">
          {{ bdFormItem.operator_name }}
        </FormItem>
        <FormItem label="所属BDM">
          <Select v-model="bdFormItem.bdm_id" style="width:180px" filterable @on-select="bdmChange">
            <Option v-for="item in operatorBdmList" :value="item.id" :key="item.id">{{ item.nick }}</Option>
          </Select>
        </FormItem>
        <FormItem label="所属BD">
          <Select v-model="bdFormItem.bd_id" style="width:180px" filterable>
            <Option v-for="item in BDList" :value="item.id" :key="item.id">{{ item.nick }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>

<script>

export default {
  data() {
    return {
      searchData: {
        page: 1,
        limit: 10
      },
      // 列表
      columns: [
        {
          title: '商户ID',
          key: 'id',
        },
        {
          title: '上级运营商',
          key: 'operator_name',
        },
        {
          title: '商户名称',
          key: 'name',
        },
        {
          title: '商户联系人',
          key: 'contact',
        },
        {
          title: '商户手机号',
          key: 'phone',
        },
        {
          title: '商户地址',
          slot: 'addressSlot'
        },
        {
          title: '所属BDM',
          key: 'bdm_name'
        },
        {
          title: '所属BD',
          key: 'bd_name'
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 180
        },
        {
          title: '操作',
          slot: "makeSlot"
        }
      ],
      // 数据
      list: [],
      total: 0,
      //运营商列表
      operatorList: [],
      //BDM列表
      BDMList: [],
      BDList: [],
      // 绑定BD
      BdModal: false,
      bdFormItem: {},
      operatorBdmList: [],
      BDList: [],
    }
  },
  methods: {
    // 查询管理员信息
    getList() {
      let params = {
        ...this.searchData,
      };
      this.$axios('/adminfranchiser/getFranchiserList', params).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    //运营商户列表
    getOperatorList() {
      this.$axios('/adminstatistics/getOperatorList', {}).then(res => {
        this.operatorList = res;
      });
    },
    //BDM列表
    getBDMList() {
      this.$axios('/adminuser/getBdmList', {}).then(res => {
        this.BDMList = res;
      });
    },
    bdmSelectChange(val) {
      this.$axios('/adminuser/getBdListByBDM', { bdm_id: val }).then(res => {
        this.BDList = res;
      });
    },
    //绑定BD
    bindBD(id, operator_id, operator_name) {
      this.bdFormItem.id = id;
      this.bdFormItem.operator_id = operator_id;
      this.bdFormItem.operator_name = operator_name;
      this.BdModal = true;
      this.$axios('/adminuser/getOperatorBdmList', { operator_id: operator_id }).then(res => {
        this.operatorBdmList = res;
      });
    },
    bdmChange(val) {
      this.$axios('/adminuser/getBdListByBDM', { bdm_id: val.value }).then(res => {
        this.BDList = res;
      });
    },
    BdModalOk() {
      this.$axios('/adminfranchiser/franchiserBindBd', this.bdFormItem).then(res => {
        this.$Message.success("绑定成功");
        this.BdModal = false;
      });
    },
    modalCancel() { },

  },
  created() {
    this.getList();
    this.getOperatorList();
    this.getBDMList();
  }
}
</script>
<style>

</style>
